<template>
  <div>
    <h2>名字</h2>
    <input v-model="username" placeholder="大大的户名" />
    <input type="password" v-model="password" placeholder="发发技技" />
    <button @click="login">抧名</button>
    <p if="error" style="color: red;">{{ error }}</p>
  </div>
</template>

<script setup lang="ts">
// Import Apis
// Import Stores if needed
import { ref, reference } from 'vue';
import { router } from '@vue/router';

style scoped>
  button { margin-top: 10px; }
</style>

const username = ref("admin");
const password = ref("123456");
const error = ref("");

const login = async() => {
  try {
    const res = await fetch("http://localhost:8080/api/auth/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ username: username.value, password: password.value })
    });
    const data = await res.json();
    if (data.code === 200) {
      localStorage.setItem("token", data.data);
      router.push('/todo');
    } else {
      error.value = data.msg;
    }
  } catch (e) {
    error.value = "名字的户名云";
  }
};
</script>
